<?php include_once('header.php'); ?>
	<div id="content" class="row full-width nomargin">
		<div id="search_wrapper">
			<div id="label_wrapper" class="search_page">
				<label class="hide-for-small" id="lbl_search_box" for="search_box">Tìm kiếm:</label>
			</div>
			<script>
				Cufon.replace('#lbl_search_box', {fontSize: '15px', color: 'white'});
			</script>
			<div id="search_page_box">
				<input id="search_box" type="search" placeholder="Tìm kiếm địa điểm ăn uống. vd: cafe Roxa, sushi bar....."/>
				<img class="hide" id="cancel_icon" src="images/cancel-icon.png"/>
			</div>
		</div>
		<div id="mobile_autocomplete_box">
			<!-- <img id="arrow" src="images/arrow-up-small.png"/> -->
			<div class="result_category">
				<div id="results">
					<div id="category_name">NHÀ HÀNG</div>
					<ul>
						<li>
							<img src="images/result-1.png"/> Sarpinoss' Pizza
						</li>
						<li>
							<img src="images/result-2.png"/> Sarphia Restaurant
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div class="result_category">
				<div id="results">
					<div id="category_name">QUÁN CAFE</div>
					<ul>
						<li>
							<img src="images/result-3.png"/> Samdoria Cafe & Bar
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div id="mobile_autocomplete_close_box">ĐÓNG TÌM KIẾM</div>
		</div>
		<div id="autocomplete_box">
			<img id="arrow" src="images/arrow-up-small.png"/>
			<div class="result_category">
				<div id="results">
					<div id="category_name">NHÀ HÀNG</div>
					<ul>
						<li>
							<img src="images/result-1.png"/> Sarpinoss' Pizza
						</li>
						<li>
							<img src="images/result-2.png"/> Sarphia Restaurant
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
			<div class="result_category">
				<div id="results">
					<div id="category_name">QUÁN CAFE</div>
					<ul>
						<li>
							<img src="images/result-3.png"/> Samdoria Cafe & Bar
						</li>
					</ul>
				</div>
			</div> <!-- #category_name -->
		</div>
	</div> <!-- #content -->
	
	<div id="map_container" class="row">
		<div class="large-3 columns">
			<div id="side_bar">
					<script>
						$(document).ready(function() {
							$('#side_bar #header').click(function() {
								$(this).parent().children('#extender').toggleClass("hide");
							});
						});
					</script>
				<div id="area" class="hide-for-small">
					<div id="header">Khu vực</div>
					<div id="extender">
						<p><a href="#">Quận 1</a></p>
						<p><a href="#">Quận 2</a></p>
						<p><a href="#">Quận 3</a></p>
						<p><a href="#">Quận 4</a></p>
						<p><a href="#">Quận 5</a></p>
					</div>
				</div>
				<div class="categories_nav hide-for-small">
					<h2>Phong cách ẩm thực</h2>
					<p><label><input type="checkbox"/> Tất cả</label></p>
					<p><label><input type="checkbox"/> Bánh - Bánh kem (4)</label></p>
					<p><label><input type="checkbox"/> Buffet (12)</label></p>
					<p><label><input type="checkbox"/> Cafe - Kem - Sinh tố (25)</label></p>
					<p><label><input type="checkbox"/> Chay (26)</label></p>
					<p><label><input type="checkbox"/> Cơm tấm (14)</label></p>
					<p><label><input type="checkbox"/> Dân dã (8)</label></p>
					<p><label><input type="checkbox"/> Dân tộc (33)</label></p>
					<p><label><input type="checkbox"/> Fastfood (19)</label></p>
					<p><label><input type="checkbox"/> Hải sản (27)</label></p>
					<p><label><input type="checkbox"/> Hàn quốc (8)</label></p>
				</div>
				
				<div class="categories_nav hide-for-small">
					<h2>Tiện nghi</h2>
					<p><label><input type="checkbox"/> Tất cả</label></p>
					<p><label><input type="checkbox"/> Wifi</label></p>
					<p><label><input type="checkbox"/> Đặt trước</label></p>
					<p><label><input type="checkbox"/> Trả bằng thẻ tín dụng</label></p>
					<p><label><input type="checkbox"/> Có chương trình ca nhạc</label></p>
					<p><label><input type="checkbox"/> Có khu vực hút thuốc</label></p>
					<p><label><input type="checkbox"/> Có chỗ đậu ôtô</label></p>
					<p><label><input type="checkbox"/> Có cơm văn phòng</label></p>
					<p><label><input type="checkbox"/> Có phòng private</label></p>
					<p><label><input type="checkbox"/> Đậu xe miễn phí</label></p>
					<p><label><input type="checkbox"/> Có khu vực Bar</label></p>
				</div>
				
				<div id="mobile_cate0" class="show-for-small">
					<div id="header">Khu vực</div>
					<div class="left_text hide" id="extender">
						<p><a href="#">Quận 1</a></p>
						<p><a href="#">Quận 2</a></p>
						<p><a href="#">Quận 3</a></p>
						<p><a href="#">Quận 4</a></p>
						<p><a href="#">Quận 5</a></p>
					</div>
				</div>
				<div id="mobile_cate1" class="show-for-small">
					<div id="header">Phong cách ẩm thực</div>
					<div class="left_text hide" id="extender">
						<p><label><input type="checkbox"/> Tất cả</label></p>
						<p><label><input type="checkbox"/> Bánh - Bánh kem (4)</label></p>
						<p><label><input type="checkbox"/> Buffet (12)</label></p>
						<p><label><input type="checkbox"/> Cafe - Kem - Sinh tố (25)</label></p>
						<p><label><input type="checkbox"/> Chay (26)</label></p>
						<p><label><input type="checkbox"/> Cơm tấm (14)</label></p>
						<p><label><input type="checkbox"/> Dân dã (8)</label></p>
						<p><label><input type="checkbox"/> Dân tộc (33)</label></p>
						<p><label><input type="checkbox"/> Fastfood (19)</label></p>
						<p><label><input type="checkbox"/> Hải sản (27)</label></p>
						<p><label><input type="checkbox"/> Hàn quốc (8)</label></p>
					</div>
				</div>
				<div id="mobile_cate2" class="show-for-small">
					<div id="header">Tiện nghi</div>
					<div class="left_text hide" id="extender">
					<p><label><input type="checkbox"/> Tất cả</label></p>
					<p><label><input type="checkbox"/> Wifi</label></p>
					<p><label><input type="checkbox"/> Đặt trước</label></p>
					<p><label><input type="checkbox"/> Trả bằng thẻ tín dụng</label></p>
					<p><label><input type="checkbox"/> Có chương trình ca nhạc</label></p>
					<p><label><input type="checkbox"/> Có khu vực hút thuốc</label></p>
					<p><label><input type="checkbox"/> Có chỗ đậu ôtô</label></p>
					<p><label><input type="checkbox"/> Có cơm văn phòng</label></p>
					<p><label><input type="checkbox"/> Có phòng private</label></p>
					<p><label><input type="checkbox"/> Đậu xe miễn phí</label></p>
					<p><label><input type="checkbox"/> Có khu vực Bar</label></p>
					</div>
				</div>
			</div>
		</div>
		<div id="map_result_info" class="large-9 columns nopadding">
				<div id="left_search_detail" class="large-5 columns nopadding">
					<div class="search_detail" id="search_detail_left">
					<?php for ($i = 0; $i < 10; $i++) { ?>
						<div class="shop_info hide-for-small">
							<div id="info_1">
								<div id="shop_name" style="display: inline-block; width: 45%">
									<img width="100%" src="images/shop-1.png"/>
								</div>
								<div id="shop_more_info" style="display: inline-block; width: 50%; vertical-align: top;">
									<p>Nhà hàng pizza Nhật</p>
									<h1 class="discourt cufont">-20%</h1>
									<div class="hide-for-small">Like!</div>
								</div>
							</div>
							<div id="address">
								<div id="toggle_map" class="toggle_map_class">
									<span class="cufont">Chi tiết</span>
								</div>
								<h2>Nhà hàng Pizza 4P</h2>
								<p class="hide-for-small">8/15 Lê Thánh Tôn, Q1</p>
							</div>
						</div>
						
						<?php } ?>
						<div id="swipe_left" class="show-for-small">
						</div>
					<?php for ($i = 0; $i < 10; $i++) { ?>
						<div class="shop_info show-for-small">
							<div id="info_1">
								<div id="shop_name" style="display: inline-block; width: 45%">
									<img width="100%" src="images/shop-1.png"/>
								</div>
								<div id="shop_more_info" style="display: inline-block; width: 50%; vertical-align: top;">
									<p>Nhà hàng pizza Nhật</p>
									<h1 class="discourt cufont">-20%</h1>
									<div class="hide-for-small">Like!</div>
								</div>
							</div>
							<div id="address">
								<div id="toggle_map" class="toggle_map_class">
									<span class="cufont">Chi tiết</span>
								</div>
								<h2>Nhà hàng Pizza 4P</h2>
								<p class="hide-for-small">8/15 Lê Thánh Tôn, Q1</p>
							</div>
						</div>
						<?php if ($i == 4) { echo "<br/>";} ?>
						<?php } ?>
						<div id="swipe_right" class="show-for-small">
						</div>
						<script>
							function closeAll() {
								$('#toggle_map.close span').html('Chi tiết');
								$('.toggle_map_class.close').removeClass("close");
								$('.shop_info').removeClass('selected');
								Cufon.replace('.cufont');
							}
							$(document).ready(function() {
								$('.shop_info #info_1').click(function() {
									$('.shop_info').removeClass('selected');
									$(this).addClass('selected');
									closeAll();
									closeDetail(); //for specific location;
								});
							
								$('.toggle_map_class').click(function() {
									var obj = $(this);
									if (obj.hasClass('close')) {
										obj.children('span').html('Chi tiết');
										obj.removeClass("close");
										closeDetail();
									} else {
										closeAll();
										obj.addClass('close');
										obj.children('span').html('Đóng lại');
										obj.parent().parent().addClass('selected');
										openDetail() //for specific shop info;
										
									}
										Cufon.replace('.cufont');
								});
							});
							var oldH = 0;
							function openDetail() {
								$('#search_detail_right #googlemap_iframe').animate({'margin-left': '100%'}, 400, 'linear');
								if ($(window).width() < 768) {
									oldH = $('#right_search_detail .search_detail #map #shop_expand_info').height();
									$('#right_search_detail .search_detail #map #shop_expand_info').css('height', 'auto');
									$('#right_search_detail .search_detail #map').css('height', $('#right_search_detail .search_detail #map #shop_expand_info').height());
									$('#right_search_detail .search_detail').css('height', 'auto');
									$('#right_search_detail').css('height', 'auto');
								}								
							}
							function closeDetail() {
								$('#search_detail_right #googlemap_iframe').animate({'margin-left': '0'}, 400, 'linear');
								
								$('#right_search_detail .search_detail #map #shop_expand_info').css('height', oldH);
								$('#right_search_detail .search_detail #map').css('height', oldH);
								$('#right_search_detail .search_detail').css('height', oldH);
								$('#right_search_detail').css('height', oldH);
							}
						</script>
					</div>
				</div>
				<div id="right_search_detail" class="large-7 columns nopadding">
					<div class="search_detail" id="search_detail_right">
						<div id="map">
							<div id="shop_expand_info">
								<div class="result_category">
									<h2>Giới thiệu</h2>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</p>
									<img width="100%" src="images/image-shop.png"/>
									<br/><br/>
									<h2>Bản đồ</h2>
									<br/>
									<iframe id="expand_info_map" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=10.836004,106.663513&amp;spn=0.944153,0.549316&amp;z=10&amp;output=embed"></iframe>
									
									<br/>
									<div class="fb-comments" data-href="https://developers.facebook.com/docs/reference/plugins/comments/" data-num-posts="10"></div>
								</div>
							</div>
							<div id="smaller_bigger_button" class="hide-for-small">
							</div>
							<iframe id="googlemap_iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=10.836004,106.663513&amp;spn=0.944153,0.549316&amp;z=10&amp;output=embed"></iframe>
							
							<div class="spacer"></div>
						</div>
						<div class="spacer"></div>
					</div>
				</div>
				<script>
					function autoHeight() {
						if ($(window).width() > 768) {
							//scroll inside only
							$('#side_bar').unbind( 'mousewheel DOMMouseScroll');
							$('#shop_expand_info').unbind( 'mousewheel DOMMouseScroll');
							$('#search_detail_left').unbind( 'mousewheel DOMMouseScroll');
							$('#side_bar').bind( 'mousewheel DOMMouseScroll', function ( e ) {
									var delta = e.wheelDelta || -e.detail;
									this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
									e.preventDefault();
							});
							$('#search_detail_left').bind( 'mousewheel DOMMouseScroll', function ( e ) {
									var delta = e.wheelDelta || -e.detail;
									this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
									e.preventDefault();
							});
							$('#shop_expand_info').bind( 'mousewheel DOMMouseScroll', function ( e ) {
									var delta = e.wheelDelta || -e.detail;
									this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
									e.preventDefault();
							});

						
							var nHeight = $(window).height() - 100;
							$('.search_detail').height(nHeight);
							$('#map #googlemap_iframe').height(nHeight);
							$('#map #shop_expand_info').css('height',nHeight);
							$('#map #expand_info_map').css('height',nHeight - 70);
							$('.search_detail').css({'white-space':'normal','overflow-x':'hidden'});
							$('.shop_info.show-for-small').css({'display':'none'});
							$('#side_bar').css('height', nHeight);
							
							$('.shop_info.show-for-small').attr('style','display:none'); //for IE
						} else {
							//Scroll only unbind
							$('#side_bar').unbind( 'mousewheel DOMMouseScroll');
							$('#shop_expand_info').unbind( 'mousewheel DOMMouseScroll');
							$('#search_detail_left').unbind( 'mousewheel DOMMouseScroll');
							$('#search_detail_left').bind('mousewheel DOMMouseScroll', function( e ) {
								var delta = e.wheelDelta || -e.detail;
								this.scrollLeft += ( delta < 0 ? 1 : -1 ) * 30;
								event.preventDefault();
							});
						
							$('.search_detail').height('190px');
							var newH = $(window).height() - 220;
							$('#right_search_detail').height(newH);
							$('#search_detail_right').height(newH);
							$('#map').height(newH);
							$('#map #googlemap_iframe').height(newH);
							$('#map #shop_expand_info').css('height', newH);
							$('#map #expand_info_map').css('height', newH - 70);
							$('.search_detail').css({'white-space':'nowrap','overflow-x':''});
							$('.shop_info.show-for-small').attr('style','display:inline-block !important'); //for IE
							$('#side_bar').css('height', 'auto');
						}
						$('.fb-comments').css({'width':'100% !important'});
						$('.fb-comments iframe').css({'width':'100% !important'});
						$('.fb-comments span').css({'width':'100% !important'});
					}
					jQuery('iframe').load(function(){
						autoHeight();
					});
					var oldW1, oldW2;
					$(document).ready(function() {
						//Set side bar, search result & map height.
						autoHeight();
						
						//auto show detail button
						$('.shop_info').mouseover(function() {
							if (!$(this).children('#address').children('.toggle_map_class').hasClass('show')) {
								$(this).children('#address').children('.toggle_map_class').addClass('show');
							}
						}).mouseleave(function() {
							if ($(this).children('#address').children('.toggle_map_class').hasClass('show') && !$(this).children('#address').children('.toggle_map_class').hasClass('close')) {
								$(this).children('#address').children('.toggle_map_class').removeClass('show');
							}
						});
						
						//trigger for detail button.
						$('#smaller_bigger_button').click(function() {
							$(this).toggleClass('big');
							if ($(this).hasClass('big')) {
								oldW1 = $('#left_search_detail').width();
								oldW2 = $('#right_search_detail').width();
								$('#left_search_detail').animate({'width':0, 'opacity':0}, 400, 'linear');
								$('#right_search_detail').animate({'width':$('#map_result_info').width()}, 400, 'linear');
							} else {
								$('#left_search_detail').animate({'width':oldW1, 'opacity':1}, 400, 'linear', function() {
									$('#left_search_detail').css('width', '');
								});
								$('#right_search_detail').animate({'width':oldW2}, 400, 'linear', function() {
									$('#right_search_detail').css('width', '');
								});
							}
						});
						

						
						//auto fix scroll
						var autoFixDelay;
						$(window).scroll(function(e){
							clearTimeout(autoFixDelay);
							autoFixDelay = setTimeout(function() {
								if (Math.abs($(window).scrollTop() - $('#search_wrapper').offset().top) < 100 && ($(window).width() > 768)) {
									jQuery('#search_wrapper').goTo();
								}
							}, 100);
						});
						
						//auto srcoll when click into searchbox
						$('#search_box').click(function() {
							jQuery('#search_wrapper').goTo();
						});
					});
					var autoResizeDelay;
					$(window).resize(function() {
						clearTimeout(autoResizeDelay);
						autoResizeDelay = setTimeout(function() {
							autoHeight();
						}, 1000);
					});
				</script>
		</div>
		
	</div>
	
<div id="imonials">
	<div class="row">
		<ul class="small-block-grid-5 large-block-grid-10">
			<li><img src="images/p1.png"/></li>
			<li><img src="images/p2.png"/></li>
			<li><img src="images/p3.png"/></li>
			<li><img src="images/p4.png"/></li>
			<li><img src="images/p5.png"/></li>
			<li><img src="images/p6.png"/></li>
			<li><img src="images/p7.png"/></li>
			<li><img src="images/p8.png"/></li>
			<li><img src="images/p9.png"/></li>
			<li><img src="images/p10.png"/></li>
		</ul>
	</div>
</div>
<?php include_once('footer.php'); ?>